<template>
  <div>
    <div
      class="navigation-container"
      :style="{
        background: background,
        color: textColor,
        width: `${folding ? minWidth : maxWidth}`
      }">
      <div
        class="folding-btn"
        v-ripple
        @click="folding = !folding">
        <v-icon
          size="20"
          :color="textColor">
          fas fa-bars
        </v-icon>
      </div>
      <div
        class="navigation-btn__default"
        :class="currentSelected === index ? 'navigation-btn__selected' : ''"
        v-for="(item, index) in list"
        :key="item.id"
        @click="handleNavigationBtnClick(index)"
        v-ripple>
        <v-icon
          size="20"
          :color="textColor">
          {{ item.icon }}
        </v-icon>
        <div class="btn-title" v-show="!folding">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "navigationDrawer",
        props: {
            collapsible: {
                type: Boolean,
                default: true,
            },
            list: {
                type: Array
            },
            backgroundColor: {
                type: String,
                default: ''
            },
            textColor: {
                type: String,
                default: 'rgba(255, 255, 255, 0.9)'
            },
            minWidth: {
                type: String,
                default: '80px'
            },
            maxWidth: {
                type: String,
                default: '250px'
            },
            animationDuration: {
                type: String,
                default: '300ms'
            }
        },
        data() {
            return {
                folding: true, //当前是否为折叠状态
                currentSelected: 0, //当前选择的导航序号
                background: '',
            }
        },
        methods: {
            handleNavigationBtnClick(index) {
                this.currentSelected = index;
                this.folding = true;
                this.$emit("select", index);
            },
            updateColor() {
                this.background = document.getElementsByTagName('body')[0].style.getPropertyValue('--custom-color');
            }
        },
        mounted() {
            this.background = this.backgroundColor === '' ? '#4746a3' : this.backgroundColor;
            document.getElementsByTagName('body')[0].style.setProperty('--min-width', this.minWidth);
            document.getElementsByTagName('body')[0].style.setProperty('--animation-duration', this.animationDuration);
        }
    }
</script>

<style lang="scss" scoped>
  $min-width: var(--min-width);
  $animation-duration: var(--animation-duration);

  .navigation-container {
    height: 100%;
    z-index: 9999999;
    transition-duration: $animation-duration;
    transition-property: width;

    .folding-btn {
      width: 100%;
      height: fit-content;
      padding: 30px 0 30px calc(($min-width - 20px) / 2);
    }

    .navigation-btn__default {
      width: 100%;
      height: fit-content;
      padding: 20px 0 20px;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      text-align: center;
      transition-duration: $animation-duration;
      transition-property: border-left, background-color;

      .btn-title {
        margin-left: 10px;
        display: inline;
        font-size: 16px;
      }
    }

    .navigation-btn__selected {
      border-left: 3px solid #f1f1f1;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>